<template>
  <div>
    <div @click="toRecommentSong"><Title title="推荐歌单"></Title></div>
    <div class="libiao">
      <div class="songdiv" :data-id="daySongId" @click="daySong">
        <div class="song-content">
          <img class="song-img" src="../../images/gao.jpg" />
          <div class="songhover">
            <div class="iconfont icon-bofang"></div>
          </div>
          <div class="dayNew">根据您的口味生成每日更新</div>
          <div class="iconfont icon-rili"></div>

          <span class="riqi">{{ date }}</span>
        </div>
        <div class="daysong">每日歌曲推荐</div>
      </div>
      <div
        class="songdiv"
        v-for="item in recommentsong"
        :key="item.id"
        :data-id="item.id"
        @click="daySong"
      >
        <div class="song-content">
          <img class="song-img" v-lazy="item.picUrl" />
          <div class="songhover">
            <div class="iconfont icon-bofang"></div>
          </div>
          <Bofang wan="万" :playCount="item.trackCount"></Bofang>
        </div>
        <div class="daysong">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Bofang from '../bofang/bofang.vue'
import Title from '../Title/title.vue'
export default {
  name: 'RecommendSong',
  components: {
    Bofang,
    Title,
  },
  data() {
    return {
      istrue: false,
      recommentsong: [],
      date: '',
      daySongId: 0,
    }
  },
  // http://localhost:8081/login/cellphone?phone=17820707676&password=a2345678
  methods: {
    async resong() {
      const res = await this.$API.RecommentSong.reqsong(10)
      this.recommentsong = res.result
      //取出第一项的id
      this.daySongId = this.recommentsong[0].id
      // 截取后面的9项  只要遍历生成9项
      this.recommentsong = res.result.slice(1, 10)
      // console.log(this.recommentsong, '~~~', this.daySongid)
    },
    // 点击标题实现跳转
    toRecommentSong() {
      this.$router.history.push({ path: '/findmusic/songlist' })
    },
    // // 点击播放
    // bofangSong(id) {
    //   console.log(id)
    // },
    // 点击跳转
    daySong(event) {
      //  console.dir(event.currentTarget.dataset.id)
      // 拿到歌曲id
      const { id } = event.currentTarget.dataset
      //  console.log(id);
      // 跳转页面，并将数据传过去
      this.$router.history.push({
        name: 'Songsheet',
        query: {
          id,
        },
      })
      // const id = this.recommentsong[index].id
      // console.log(index, id)
    },
    //tracks
  },
  async mounted() {
    const day = new Date()
    this.date = day.getDate()
    this.resong()
  },
}
</script>

<style scoped>
.libiao {
  width: 100%;
  margin-left: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.songhover {
  display: none;
  position: absolute;
  margin-top: 120px;
  margin-left: 180px;
}
.dayNew {
  font-size: 12px;
  display: none;
  position: absolute;
  height: 30px;
  width: 100%;
  line-height: 30px;
  background-color: rgba(87, 87, 87, 0.7);
  color: white;
  text-indent: 10px;
  border-radius: 5px;
}
.songdiv {
  /*    */
  /* flex: 1; */
  flex-grow: 0;
  flex-shrink: 1;
  width: 18%;
  min-width: 18%;
  /* margin-left: 20px; */
}
.song-content {
  height: 180px;
  position: relative;
}
/* 当鼠标悬停在元素上,播放按钮显示 */
.song-content:hover .songhover {
  display: block;
}
.song-content:hover .dayNew {
  display: block;
}

.song-img {
  border-radius: 5px;
  font-size: 30px;
  /* position: relative;
  left: 70px; */
  position: absolute;
  color: aliceblue;
  width: 100%;
  height: 100%;
  z-index: -1;

  /* position: absolute; */
}
.riqi {
  margin-left: 50%;
  position: absolute;
  /* transform: translateY(50%); */
  transform: translateX(-50%);
  top: 85px;
  z-index: 99;
  font-size: 30px;
  color: white;
}
.daysong {
  width: 180px;
  font-size: 14px;
  line-height: 18px;
  margin: 10px 0 20px;
}
/* 图标 */
.icon-bofang {
  font-size: 40px;
  color: rgb(233, 64, 13);
  position: absolute;
  top: 15px;
  left: -40px;
}
.icon-rili {
  font-size: 80px;
  position: relative;
  top: 50px;
  left: 50px;
  color: white;
}
</style>